<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>店铺管理</span>
      </div>

      <!-- 主要内容 -->
      <div>
        <el-form
          :model="shopForm"
          :rules="rules"
          ref="shopForm"
          label-width="100px"
          class="demo-shopForm"
        >
          <el-form-item label="店铺名称" prop="name">
            <el-input v-model="shopForm.name"></el-input>
          </el-form-item>
          <el-form-item label="店铺公告" prop="bulletin">
            <el-input
              type="textarea"
              v-model="shopForm.bulletin"
              rows="10"
            ></el-input>
          </el-form-item>

          <!-- 头像上传 -->

          <el-form-item label="店铺头像" prop="avatar">
            <el-upload
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="shopForm.avatar"
                :src="shopForm.avatar"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <!-- 店铺图片 -->

          <el-form-item label="店铺图片" prop="pics">
            <el-upload
              :action="action"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="shopForm.pics"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" modal>
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>

          <!-- 计数器配送费 -->

          <el-form-item label="配送费" prop="deliveryPrice">
            <el-input-number
              v-model="shopForm.deliveryPrice"
              @change="handleChange"
              :min="0"
              label="描述文字"
            ></el-input-number>
          </el-form-item>

          <!-- 配送时间 -->
          <el-form-item label="配送时间" prop="deliveryTime">
            <el-input-number
              v-model="shopForm.deliveryTime"
              @change="handleChange"
              :min="10"
              label="描述文字"
            ></el-input-number>
          </el-form-item>

          <!-- 配送描述 -->

          <el-form-item label="配送描述" prop="description">
            <el-input
              type="textarea"
              v-model="shopForm.description"
              rows="8"
            ></el-input>
          </el-form-item>

          <!-- 店铺评分 -->

          <el-form-item label="店铺评分" prop="score">
            <el-rate
              v-model="shopForm.score"
              disabled
              show-score
              text-color="#ff9900"
              
            >
            </el-rate>
          </el-form-item>

          <!-- 销量 -->
          <el-form-item label="销量" prop="sellCount">
            <span>{{ shopForm.sellCount }}</span>
          </el-form-item>

          <!-- 活动 -->
          <el-form-item label="活动" prop="supports">
            <el-checkbox-group v-model="shopForm.supports">
              <el-checkbox
                label="在线支付满28减5"
                name="supports"
              ></el-checkbox>
              <el-checkbox
                label="VC无限橙果汁全场8折"
                name="supports"
              ></el-checkbox>
              <el-checkbox label="单人精彩套餐" name="supports"></el-checkbox>
              <el-checkbox
                label="特价饮品8折抢购"
                name="supports"
              ></el-checkbox>
              <el-checkbox label="单人特色套餐" name="supports"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- 营业时间 -->
          <el-form-item label="营业时间" prop="date">
            <el-time-picker
              is-range
              v-model="shopForm.date"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              value-format="HH:mm:ss"
            >
            </el-time-picker>
          </el-form-item>

          <el-button  type="success" class="saveBtn" size="medium" @click="saveBtn">保存</el-button>

        </el-form></div
    ></el-card>
  </div>
</template>

<script>

import {shopInfo,shopEdit} from '../../api/shop'
export default {
  data() {
    return {
      action:"http://127.0.0.1:5000/shop/upload",
       dialogVisible: false,
      dialogImageUrl: "",
      shopForm: {
        id: "",
        name: "",
        bulletin: "", //公告
        avatar: "", //店铺的头像
        deliveryPrice: "", //配送费
        minPrice: 0, //起送价格
        deliveryTime: "", //送达时间
        description: "", //描述
        score: 0, //店铺评分
        sellCount: "", //销量
        supports: [], //活动
        pics: [], //店铺的图片是一个数组
        date: [], //营业时间
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //计数器
    handleChange(value) {
     // console.log(value);
    },

    // 店铺头像上传   我们要得到照片墙需要的格式
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
     
    //预览  
    handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

       //店铺图片上传
    //删除   我们点击图片删除的时候要将图片加入列表并根据索引来删除 此时我们直接添加的图片的格式是乱的
    handleRemove(file, fileList) {
     console.log(file, fileList);
        //我们根据得到的图片名字来删除数组里面的图片
    let name=  this.shopForm.pics.findIndex((item)=>{
        return item.name==file.name
      })

      console.log(name);   //这个就是删除图片对应的索引

      //根据name删除图片
      this.shopForm.pics.splice(name,1)
     // console.log(this.shopForm.pics);

    },

  //成功上传的时候将图片加入到pics里面去
    handleSuccess(res) {
      console.log(res.imgUrl);
      let index=res.imgUrl.lastIndexOf("/")
      let name=res.imgUrl.substr(index+1)
      this.shopForm.pics.push({name:name,url:res.imgUrl})

    },

    //获取店铺信息  
   async shopList(){
     let res=await shopInfo({params:{}});
     console.log(res);

     //我们要得到照片墙需要的格式
      // [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
      //["http://127.0.0.1:5000/imgs/1640784901700.png","http://127.0.0.1:5000/imgs/1640784901700.png"]

      res.data.pics=res.data.pics.map((item)=>{
        let index=item.lastIndexOf("/")
        return {name:item.substr(index+1),url:item}
      })

     this.shopForm=res.data  //数据列表渲染
     console.log(res.data.pics);
    },


    //点击保存，保存数据
  async  saveBtn(){
      console.log(this.shopForm);
      //深拷贝然页面数据不受修改时的影响
      let shopForm2=JSON.parse(JSON.stringify(this.shopForm))

      //修改我们得到的店铺名称
     let index=shopForm2.avatar.lastIndexOf("/")
     let name=shopForm2.avatar.substr(index+1)   //此时得到了店铺名字
     console.log(name);

     //店铺图片处理  我们只需要的样子  ['图片名字','图片名字']
     console.log(shopForm2.pics);
      shopForm2.pics=shopForm2.pics.map((item)=>{
        return item.name   //输出名字
      })
      console.log(shopForm2.pics);

      //发送ajax
      let res=await shopEdit(shopForm2)
      console.log(res);
      let {code,msg}=res
      if (code===0) {
        this.$message({
          type:"success",
          message:msg,
        })
        // this.shopList();
      }else{
        this.$message.error(msg)
      }
    }
  },

  created(){
    this.shopList();

  }
};
</script>

<style lang="less" scoped>
//头像上传
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
.saveBtn{
  margin-left: 50px;
  margin-top: 30px;
}
</style>